<template>
	<view class="content">
		<view class="schoolServe">
			<view class="button1text">
				学校服务
			</view>
			<view class="button1home">
				<view v-for="button in buttons1" :key="button.id" @click="goPage(button.id)" class="button1">
					<image :src="button.imgurl" mode="" class="button1img"></image>{{button.text}}
				</view>
			</view>

		</view>
		<view class="classServe">
			<view class="button2text">
				班级服务
			</view>
			<view class="button2home">
				<view v-for="button in buttons2" :key="button.id" @click="goPage(button.id + 4)" class="button2">
					<image :src="button.imgurl" mode="" class="button2img"></image>{{button.text}}
				</view>
			</view>
		</view>
		<view class="personServe">
			<view class="button3text">
				个人服务
			</view>
			<view class="button3home">
				<view v-for="button in buttons3" :key="button.id" @click="goPage(button.id + 7)" class="button3">
					<image :src="button.imgurl" mode="" class="button3img"></image>{{button.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buttons1: [{
						id: 1,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E5%AD%A6%E6%A0%A1%E7%AE%80%E4%BB%8B.png',
						text: '学校简介'
					}, {
						id: 2,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E5%B8%88%E8%B5%84%E5%8A%9B%E9%87%8F.png',
						text: '师资力量'
					},
					{
						id: 3,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E6%A0%A1%E5%9B%AD%E6%B4%BB%E5%8A%A8.png',
						text: '校园活动'
					},
					{
						id: 4,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E4%BD%9C%E6%81%AF%E6%97%B6%E9%97%B4.png',
						text: '作息时间'
					}
				],
				buttons2: [{
						id: 1,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E7%8F%AD%E7%BA%A7%E6%88%90%E5%91%98.png',
						text: '班级成员'
					}, 
					{
						id: 2,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E4%BB%BB%E8%AF%BE%E6%95%99%E5%B8%88.png',
						text: '任课教师'
					},
					{
						id: 3,
						imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E7%8F%AD%E8%B4%B9%E6%94%B6%E6%94%AF.png',
						text: '经费收支'
					}
				],
				buttons3: [{
					id: 1,
					imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E6%9C%8D%E5%8A%A1%E7%83%AD%E7%BA%BF.png',
					text: '服务热线'
				}, {
					id: 2,
					imgurl: 'https://web-xktlias.oss-cn-hangzhou.aliyuncs.com/fuwu/%E6%84%8F%E8%A7%81%E5%8F%8D%E9%A6%88.png',
					text: '意见反馈'
				}]
			}
		},
		onPullDownRefresh() {
			console.log('刷新页面');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			goPage(id) {
				console.log(id);
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/jianjie/jianjie'
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: '/pages/tuandui/tuandui'
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: '/pages/huodong/huodong'
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: '/pages/zuoxi/zuoxi'
					})
				} else if (id == 5) {
					uni.navigateTo({
						url: '/pages/chengyuan/chengyuan'
					})
				} else if (id == 6) {
					uni.navigateTo({
						url: '/pages/renjiao/renjiao'
					})
				} else if (id == 7) {
					uni.navigateTo({
						url: '/pages/banfei/banfei'
					})
				} else if (id == 8) {
					uni.navigateTo({
						url: '/pages/fuwu/fuwu'
					})
				} else if (id == 9) {
					uni.navigateTo({
						url: '/pages/yijian/yijian'
					})
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.schoolServe {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 400rpx;

	}

	.button1text {
		display: flex;
		width: 100%;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
		margin: 0%;
		padding-left: 100rpx;
		padding-top: 60rpx;
	}

	.button1home {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;
		margin-bottom: 100rpx;
	}

	.button1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 2000rpx;
		height: 400rpx;
		font-size: 22rpx;
		font-family: AliMamaShuHei;
	}

	.button1img {
		width: 100rpx;
		height: 100rpx;

	}
	.classServe {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 400rpx;
	
	}
	
	.button2text {
		display: flex;
		width: 100%;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
		margin: 0%;
		padding-left: 100rpx;
		padding-top: 60rpx;
	}
	.button2home {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;
		margin-bottom: 100rpx;
	}
	
	.button2 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 2000rpx;
		height: 400rpx;
		font-size: 22rpx;
		font-family: AliMamaShuHei;
	}
	
	.button2img {
		width: 100rpx;
		height: 100rpx;
	
	}
	.personServe {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 400rpx;
	
	}
	
	.button3text {
		display: flex;
		width: 100%;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		font-family: AliMamaShuHei;
		margin: 0%;
		padding-left: 100rpx;
		padding-top: 60rpx;
	}
	
	.button3home {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;
		margin-bottom: 100rpx;
	}
	
	.button3 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 2000rpx;
		height: 400rpx;
		font-size: 22rpx;
		font-family: AliMamaShuHei;
	}
	
	.button3img {
		width: 100rpx;
		height: 100rpx;
	
	}
</style>